<template>
  <view class="extension">
    <image class="bgImage" :src="IMAGES.EXTENSION_BG_01"></image>

    <view class="header">
      <image class="headerImage" :src="IMAGES.EXTENSION_AD_01"></image>
      <view class="headerContent flex flex-direction-row align-center justify-between">
        <view class="flex flex-direction-column justify-center align-center">
          <text class="score" v-text="scoreGet"></text>
          <text class="scoreText">待领取奖励积分</text>
        </view>
        <view class="getBtn" @tap="getInviteReward">领 取</view>
      </view>
    </view>

    <view class="body">
      <view class="taskItem" v-for="(item, index) in invites" :key="index">
        <view
          class="taskImage"
          :class="{
            unlock: item.min <= total,
            lock: item.min > total
          }"
          :style="{
            'background-image': 'url(' + (item.min > total ? IMAGES.EXTENSION_LOCK : IMAGES.EXTENSION_UNLOCK) + ')'
          }"
        >
          <view class="taskImageInfo">
            <view class="score" v-text="item.reward.score"></view>
            <view class="util">积分/人</view>
            <view class="title" v-text="item.title"></view>
          </view>
        </view>
        <view class="btn btn-one" v-if="item.max < total">已领完</view>
        <template v-else>
          <view class="btn" v-if="total < item.min">剩余{{ item.reward.score * (item.max - item.min + 1) }}积分</view>
          <view class="btn" v-else>剩余{{ item.reward.score * (item.max - total) }}积分</view>
        </template>
      </view>
    </view>
    <!-- #ifdef APP-PLUS -->
    <view class="footShare"><share-one></share-one></view>
    <!-- #endif -->
  </view>
</template>
<script>
import { IMAGES } from "@/config/resources";
import uniApp from "@/utils/uni-app";
import shareOne from "./components/share";
import tabMixin from "../tabMixin";
export default {
  mixins: [tabMixin],
  components: {
    shareOne
  },
  data() {
    return {
      invites: [],
      total: 0, // 已经邀请的人数
      scoreGet: 0, // 可以领取的积分
      currentTotal: 0 // 已领取积分的人数
    };
  },
  computed: {
    IMAGES: () => IMAGES
  },
  onShow() {
    this.init();
    uni.$on("share_success", () => {
      this.init();
    });
  },
  methods: {
    init() {
      return this.$api.task.inviteTasks().then(_ => {
        this.invites = _.data.data.list;
        this.total = 4; //_.data.data.invite;
        this.scoreGet = _.data.data.scoreGet;
        this.currentTotal = _.data.data.get;
        return _;
      });
    },
    // 领取邀请任务奖励
    getInviteReward() {
      this.$api.task
        .getInviteReward()
        .then(_ => {
          uniApp.toast("领取成功");
          this.init();
        })
        .catch(e => {
          uniApp.alert(e.data.msg || "领取失败");
        });
    }
  },
  onPullDownRefresh() {
    uni.showLoading({
      title: "任务更新中..."
    });
    this.init()
      .then(() => {
        uni.hideLoading();
        uni.stopPullDownRefresh();
      })
      .catch(e => {
        uniApp.alert(e.message || e.data.msg);
        uni.stopPullDownRefresh();
      });
  }
};
</script>
<style lang="scss" scoped>
.extension {
  position: relative;
  padding-top: var(--status-bar-height);
  /* #ifndef APP-PLUS-NVUE */
  height: 100%;
  overflow: hidden;
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
}
.bgImage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 750rpx;
  height: 324rpx;
}

.header {
  position: relative;
  width: 692rpx;
  height: 276rpx;
  margin-top: 120rpx;
}
.headerImage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 692rpx;
  height: 276rpx;
}
.headerContent {
  position: absolute;
  bottom: 0;
  width: 692rpx;
  height: 180rpx;
  padding: 0 50rpx;
}
.score,
.scoreText {
  color: #ffffff;
}
.score {
  font-size: 68rpx;
}
.scoreText {
  font-size: 28rpx;
}
.getBtn {
  background-color: #6db7ed;
  font-size: 24upx;
  padding: 5upx 60upx;
  line-height: 50upx;
  height: 50upx;
  border-radius: 50upx;
  color: #ffffff;
}
.getBtn:active {
  transform: scale(1.1);
}

// 内容区域
.body {
  width: 750rpx;
  height: calc(100% - 276rpx - 120rpx - 120rpx);
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
}
.taskItem {
  width: 33.3%;
  margin: 10upx 0;
  text-align: center;
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  // justify-content: center;
  align-items: center;
}
.taskImage {
  position: relative;
  width: 229rpx;
  height: 280rpx;
  background-size: 100% 100%;
  margin-left: 10rpx;
  overflow: hidden;
  &.unlock {
    .score {
      color: #fb7299;
      font-size: 60rpx;
      margin-top: 70rpx;
      line-height: 60rpx;
    }
    .util {
      color: #fb7299;
      font-size: 26rpx;
    }
    .title {
      color: #ffffff;
      margin-top: 40rpx;
      font-size: 24rpx;
    }
  }
  &.lock {
    .score {
      color: #ffffff;
      font-size: 42rpx;
      margin-top: 30rpx;
    }
    .util {
      color: #ffffff;
      font-size: 26rpx;
    }
    .title {
      color: #ffffff;
      margin-top: 90rpx;
      font-size: 24rpx;
    }
  }
}

.btn {
  width: 80%;
  margin: 0 auto;
  background-color: #6db7ed;
  height: 50upx;
  color: #ffffff;
  font-size: 24upx;
  line-height: 50upx;
  border-radius: 50upx;
  text-align: center;
  &.btn-one {
    background: #9aa2af;
    box-shadow: none;
  }
  &:active:not(.btn-one) {
    transform: scale(1.1);
  }
}

.footShare {
  height: 120rpx;
  width: 750rpx;
}
</style>
